<!DOCTYPE html>
<html lang="szw" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <meta name="keywords" th:content="${@module.get('sysConfig').SITE_KWD}">
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="stylesheet" th:href="@{/assets4face/css/bootstrap.css}">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" th:href="@{/assets4face/css/style.css}" type="text/css" media="all"/>
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link th:href="@{/assets4face/css/font-awesome.css}" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!--swiper-->
    <link th:href="@{/assets4face/css/swiper.css}" rel="stylesheet">
    <link th:href="@{/assets4face/css/swiper.min.css}" rel="stylesheet">
    <script th:src="@{/js/swiper.js}"></script>
    <script th:src="@{/js/swiper.min.js}"></script>
    <!--swiper-->
    <script th:inline="javascript">var ctx = [[@{/}]];</script>
</head>
<body>
<!-- mian-content -->
<div class="main-w3layouts-header-sec">
    <!-- header -->
    <header class="header-w3ls">
        <div class="container-fluid inner-sec-w3ls">
            <div class="header d-lg-flex justify-content-between align-items-center">
                <div class="nav_w3ls">
                    <nav>
                        <label for="drop" class="toggle toogle-2">主页</label>
                        <input type="checkbox" id="drop"/>
                        <ul class="menu">
                            <li th:class="${categoryId=='index' ? 'active' : ''} ">
                                <a href="/">主页</a>
                            </li>
                            <li th:each="category:${@module.get('categoryList')}"
                                th:class="${category.id==categoryId ? 'active':(#lists.isEmpty(category.nodes)?'':'dropdown')}">
                                <a th:if="${category.pid==null||category.pid==0}"
                                   th:href="@{${not #lists.isEmpty(category.nodes)? '#': ('/blog/category/' + category.id)}}"
                                   th:class="${#lists.isEmpty(category.nodes)?'':'dropdown-toggle'}"
                                   th:data-toggle="${#lists.isEmpty(category.nodes)?'':'dropdown-toggle'}">
                                    <!--dropdown-->
                                    <span th:text="${category.name}"></span>
                                    <b th:if="${not #lists.isEmpty(category.nodes)}" class="caret"></b>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <!-- //nav -->
            </div>
        </div>
    </header>
</div>
<!-- //header -->
<div class="main-content" id="home">
    <div class="swiper-container main-content"><!-- main-content -->
        <div class="swiper-wrapper">
            <div class="swiper-slide" th:each="banner,bannerList : ${bannerList}">
                <img th:src="@{${'/images/'+ banner.imageId+'?w=960&h=540'}}" width="100%" height="100%">
            </div>
        </div>
    </div>
    <!-- //banner -->
</div>
<!--// mian-content -->
<!-- /grids-content -->
<section class="banner-w3ls-bottom py-5" id="part">
    <div class="container-fluid py-lg-5 inner-sec-w3ls">
        <div class="header-w3layouts text-center mb-5">
            <div th:each="item,temp : ${articleList}">
                <h3>
                    <a class="title-w3pvt mb-3" th:href="@{${'/blog/article/'+item.id}}" th:text="${item.title}"></a>
                    <p class="sub-para" th:text="${item.content}"></p>
                </h3>
            </div>
        </div>
        <!--<div class="row part-grids">
            <div class="col-lg-4 partgrid1">
                <img src="images/t1.jpg" alt="part image" class="img-fluid">
                <h4 class="mt-4">内容区域2</h4>
                <p class="mt-3">内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2内容区域2</p>
            </div>
            <div class="col-lg-4 mt-lg-0 mt-5 partgrid2">
                <img src="images/t2.jpg" alt="part image" class="img-fluid">
                <h4 class=" mt-4">内容区域3</h4>
                <p class="mt-3">内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3内容区域3</p>
            </div>
            <div class="col-lg-4 partgrid3 mt-lg-0 mt-4">
                <img src="images/t3.jpg" alt="part image" class="img-fluid">
                <h4 class=" mt-4">>内容区域4</h4>
                <p class="mt-3">内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4内容区域4</p>
            </div>
        </div>-->
    </div>
</section>
<!-- footer -->
<footer class="footer-content py-5">
    <div class="container-fluid py-lg-5 inner-sec-w3ls">
        <div class="row">
            <div class="col-lg-4 footer-top mt-md-0 mt-sm-5 pr-lg-5">
                <h2>
                    <a class="navbar-brand">
                        主页
                    </a>
                </h2>
                <p class="my-3">主页</p>
            </div>
            <!--底部右侧文字描述-->
            <div class="col-lg-3 mt-md-0 mt-5">
                <div class="footer-w3pvt">
                    <h3 class="mb-3 w3pvt_title">Navigation</h3>
                    <hr>
                    <div class="row">
                        <ul class="col-6 list-info-w3pvt links">
                            <li>
                                <a href="">
                                    底部导航1
                                </a>
                            </li>
                        </ul>
                        <ul class="col-6 list-info-w3pvt links">
                            <li>
                                <a href="">
                                    底部导航2
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--底部联系我们-->
            <div class="col-lg-2 mt-lg-0 mt-5">
                <div class="footer-w3pvt">
                    <h3 class="mb-3 w3pvt_title">联系我们</h3>
                    <hr>
                    <div class="last-w3layouts-contact">
                        <p>
                            <a href="mailto:example@email.com">88888888888@qq.com</a>
                        </p>
                    </div>
                    <div class="last-w3layouts-contact my-2">
                        <p>+86 133 3333 3333</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- //footer -->
<!-- footer bottom -->
<div class="copy-right py-2">
    <div class="container-fluid inner-sec-w3ls">
        <div class="row">
            <div class="col-lg-6 copy-w3pvt">
                <p class="copy-right-grids text-li text-left my-sm-4 my-4">Copyright &copy; 2019.x公司 All rightsreserved</p>
            </div>
            <div class="move-top col-1"><a href="#home" class="move-top"> <span class="fa fa-angle-up"aria-hidden="true"></span></a></div>
        </div>
    </div>
</div>
<!-- //footer bottom -->
</body>
<script>
    /* addEventListener("load", function() {
         setTimeout(hideURLbar, 0);
     }, false);
     function hideURLbar() {
         window.scrollTo(0, 1);
     }*/
    window.onload = function () {
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
        })
    }
</script>
<style>
    .swiper-container {
        width: 100%;
        height: 600px;
    }
</style>
</html>
